<template>
	<view>
		<view class="header">
			<!-- 绘制二维码 -->
			<canvas canvas-id="qrcode" style="position: absolute;left: -90000rpx;" />
			<view>
				<view class="money" v-if="isShowTopMoney" :class="{ fadeIn: isShowTopMoney }">
					<text>￥</text>
					<text>480.00</text>
				</view>
			</view>
			<view class="header-r">
				<view class="item">
					<image src="../static/wxImage/icon-qrcode.png" mode="aspectFill"></image>
					<view>邀请码</view>
				</view>
				<view class="item">
					<image src="../static/wxImage/icon-inviter.png" mode="aspectFill"></image>
					<view>邀请人</view>
				</view>
				<view class="item">
					<image src="../static/wxImage/icon-rule.png" mode="aspectFill"></image>
					<view>规则</view>
				</view>
			</view>
		</view>
		<view class="money-board ">
			<view class="money">
				<text>￥</text>
				<text>480.00</text>
			</view>
			<view class="btns">
				<button type="default">提现</button>
				<button type="default">转入余额</button>
			</view>
		</view>
		<view class="body">
			<view class="tabs">
				<view><u-tabs :list="list" :is-scroll="false" :current="current" bg-color="#FAFAFA" height="110" active-color="#2EBA6A" @change="change"></u-tabs></view>
			</view>
			<template v-if="current == 0">
				<view class="list">
					<view v-for="item in 10" class="item u-f-ac" key="item">
						<view class="item-l u-f-ac">
							<u-avatar src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg" size="70"></u-avatar>
							<view class="info">
								<view>周杰伦</view>
								<view>18755622256</view>
							</view>
						</view>
						<view class="item-r">10-30 09:56</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="list">
					<view v-for="item in 10" class="item u-f-ac">
						<view class="item-l u-f-ac">
							<u-avatar src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg" size="70"></u-avatar>
							<view class="info">
								<view>周杰伦</view>
								<view>18755622256</view>
							</view>
						</view>
						<view class="item-r">
							<text class="text1">+3.6</text>
							<text class="text2">-50.00</text>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="footer-btn u-f-ajc"><button type="default" @tap="openInviteWays">邀请好友</button></view>
		<!-- 邀请弹窗 -->
		<invateWays ref="inviteWays" @showFaceCode="showFaceCode"></invateWays>
		<face-code ref="faceCode" :qrcodeImg="qrcodeImg"></face-code>
	</view>
</template>

<script>
import invateWays from "@/components/popup/invite-ways.vue";
import faceCode from "@/components/popup/face-code.vue";
import QRCode from "@/common/qrcode.js";
export default {
	components:{ invateWays, faceCode },
	data() {
		return {
			list: [
				{
					name: '邀请好友'
				},
				{
					name: '佣金明细'
				}
			],
			current: 1,
			isShowTopMoney:false,
			qrcodeImg:''
		};
	},
	onPageScroll(e) {
		let scrollTop = e.scrollTop;
		this.isShowTopMoney = scrollTop > 120;
	},
	mounted() {
		this.generateQRcode();
	},
	methods: {
		change(index) {
			this.current = index;
		},
		openInviteWays() {
			this.$refs.inviteWays.open();
		},
		showFaceCode() {
			this.$refs.faceCode.open();
		},
		async generateQRcode() {
			let qrcode = new QRCode({
				context: this, // 上下文环境
				canvasId: 'qrcode', // canvas-id
				usingComponents: true, // 是否是自定义组件
				showLoading: false, // 是否显示loading
				text: 'https://www.wudada.top/mp?id=123', // 生成内容
				size: 100, // 二维码大小
				width : 100,
					height : 100,
				background: '#ffffff', // 背景色
				foreground: '#00aaff', // 前景色
				pdground: '#00aa00', // 定位角点颜色
				correctLevel: 3, // 容错级别
				image: '/static/index/user.png', // 二维码图标
				imageSize: 30,// 二维码图标大小
				cbResult:  (res) => { // 生成二维码的回调
					this.qrcodeImg = res;
				},
			});
		},
	},
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.header {
	position: fixed;
	width: 100vw;
	top: 0;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	height: 140rpx;
	z-index: 999;

	.money {
		> text {
			color: $color-green;
			font-weight: bold;
			&:nth-child(1) {
				font-size: 28rpx;
			}
			&:nth-child(2) {
				font-size: 40rpx;
			}
		}
	}
	.header-r {
		display: flex;
		align-items: center;
	}

	.item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 32rpx;
		align-items: center;

		image {
			width: 35rpx;
			height: 35rpx;
			flex-shrink: 0;
			margin-bottom: 12rpx;
		}

		> view {
			font-size: 28rpx;
			color: #333333;
		}
	}
}
.money-board {
	height: 200rpx;
	margin: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	margin-top: 120rpx;

	.money {
		> text {
			color: $color-green;
			font-weight: bold;
			&:nth-child(1) {
				font-size: 48rpx;
			}
			&:nth-child(2) {
				font-size: 80rpx;
			}
		}
	}

	.btns {
		display: flex;

		button {
			width: 200rpx;
			line-height: 70rpx;
			height: 70rpx;
			margin: 20rpx;
			box-sizing: content-box;

			&:nth-child(1) {
				color: $color-green;
				font-size: 32rpx;
				font-weight: 600;
				background-color: #ffffff;
				border-radius: 12rpx;
				border: 1rpx solid $color-green;
			}
			&:nth-child(2) {
				color: #ffffff;
				font-size: 32rpx;
				font-weight: 600;
				background-color: $color-green;
				border-radius: 12rpx;
				border: 1rpx solid $color-green;
			}
		}
	}
}
.tabs {
	background-color: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
	position: sticky;
	top: 129rpx;
	z-index: 999;
	> view {
		margin: 0 35rpx;
		// width: 100rpx;
	}
}

.list {
	.item {
		height: 156rpx;
		margin: 0 40rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid #f2f2f2;

		.info {
			margin-left: 25rpx;
			line-height: 1.4;
			> view:nth-child(1) {
				font-size: 32rpx;
				font-weight: 600;
			}
			> view:nth-child(2) {
				font-size: 28rpx;
				color: #999999;
			}
		}

		.item-r {
			text {
				font-size: 40rpx;
				font-weight: 600;
			}
			.text1 {
				color: #0dc887;
			}
			.text2 {
				color: #999999;
			}
		}
	}
}

.footer-btn {
	position: fixed;
	width: 100vw;
	bottom: 0;
	height: 140rpx;
	background-color: #ffffff;
	box-shadow: 0 0 10rpx 1rpx #e6e6e6;

	button {
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		background-color: $color-green;
		color: #ffffff;
		font-size: 34rpx;
		font-weight: 600;
	}
}

.fadeIn {
	animation: fadeIn linear 0.3s;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
</style>
 